import { Card, Table, Modal, Button, message } from 'antd'
import { useState, useEffect } from 'react'

const TablePage = () => {
  const [data, setData] = useState()
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '年龄',
      dataIndex: 'age'
    },
    {
      title: '地址',
      dataIndex: 'address'
    },
    {
      title: '操作',
      key: 'operaion',
      render: (row, record) => {
        return <Button onClick={() => removeItem(row, record.key)}>删除</Button>
      }
    }
  ]
  // var arr7 = Array.from(Array(100), (v,k) =>k);
  useEffect(() => {
    let list = Array.from(Array(100), (v, k) => {
      return {
        id: k,
        name: `张${k}`,
        age: (Math.random() * 100).toFixed(0),
        address: `深南大道108号#${k}`,
        key: k
      }
    })
    setData(list);
  }, [])

  const removeItem = (row, key) => {
    console.log(row, key)
    Modal.confirm({
      title: '删除内容',
      content: `你忍心删除${row.name}吗？`,
      onOk: () => {
        setData(data.filter(item => item.key !== key))
        message.success('删除成功!')
      }
    })
  }

  return (
    <div >
      {/* <Card> */}
      <Table
        dataSource={data}
        columns={columns}
        bordered
        size="small" />
      {/* </Card> */}
    </div>
  )

}

export default TablePage